<template>
  <div>
    <!-- 搜索新增部分开始 -->
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="700px"
      >
        <el-form-item label="医疗卡号">
          <el-input
            v-model="formInline.personNo"
            placeholder="请输入医疗卡号"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-button type="primary" @click="addmedicalmoney">新增报销</el-button>
      </el-form>
    </div>
    <!-- 搜索新增部分结束 -->
    <!-- 展示报销记录部分开始 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" align="center" label="序号" width="100">
      </el-table-column>
      <el-table-column align="center" label="医疗卡号" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.personNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="住院开始日期" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.beginDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="住院结束日期" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.endDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="住院天数" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.inDays }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="住院级别" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.levelNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="病种" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.symptomNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="报销日期" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.submitDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.remarks }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="see(scope.row)">查看详情</el-button>
          <el-button size="mini" @click="edit(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="dropinfo(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--  展示报销部分结束 -->
    <!-- 新增报销记录弹出框 -->
    <el-dialog
      title="新增报销单"
      :visible.sync="addDialogVisible"
      width="70%"
      center
      append-to-body
    >
      <span>
        <div>
          <el-form ref="form" :model="form" :inline="true">
            <div class="flexbox">
              <el-form-item label="医疗卡号" label-width="120px">
                <el-input
                  v-model="form.Person_no"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="住院开始日期" label-width="120px">
                <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="住院结束日期" label-width="120px">
                <el-date-picker
                  v-model="value2"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="住院天数" label-width="120px">
                <el-input
                  v-model="form.In_days"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="药品费" label-width="120px">
                <el-input
                  v-model="form.Charge_for_medicine"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="检查治费" label-width="120px">
                <el-input
                  v-model="form.Charge_for_check"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="床位费" label-width="120px">
                <el-input
                  v-model="form.Charge_for_bed"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="其他费用" label-width="120px">
                <el-input
                  v-model="form.Other_charge"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="住院级别" label-width="120px">
                <el-input
                  v-model="form.Level_no"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="病种" label-width="120px">
                <el-input
                  v-model="form.Symptom_no"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="单位负担药费" label-width="120px">
                <el-input
                  v-model="form.Orga_total"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="个人承担药费" label-width="120px">
                <el-input
                  v-model="form.Person_total"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="报销日期" label-width="120px">
                <el-date-picker
                  v-model="value3"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="序号" label-width="120px">
                <el-input
                  v-model="form.Sequence_no"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注" label-width="120px">
                <el-input
                  v-model="form.Remarks"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item label="临时百分比" label-width="120px">
              <el-input
                v-model="form.Charge_standard"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改报修记录弹出框 -->
    <el-dialog
      title="修改报销单"
      :visible.sync="editDialogVisible"
      width="70%"
      center
      append-to-body
    >
      <span>
        <div>
          <el-form ref="form" :model="form" :inline="true">
            <div class="flexbox">
              <el-form-item label="序号" label-width="120px">
                <el-input v-model="form.id" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="医疗卡号" label-width="120px">
                <el-input
                  v-model="form.personNo"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="住院天数" label-width="120px">
                <el-input v-model="form.inDays" style="width: 200px"></el-input>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="住院级别" label-width="120px">
                <el-input
                  v-model="form.levelNo"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="病种" label-width="120px">
                <el-input
                  v-model="form.symptomNo"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="报销日期" label-width="120px">
                <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="住院日期" label-width="120px">
                <el-date-picker
                  v-model="form.beginDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="住院结束日期" label-width="120px">
                <el-date-picker
                  v-model="form.endDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="药品费" label-width="120px">
                <el-input
                  v-model="form.chargeForMedicine"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="检查治费" label-width="120px">
                <el-input
                  v-model="form.chargeForCheck"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="床位费" label-width="120px">
                <el-input
                  v-model="form.chargeForBed"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="其他费用" label-width="120px">
                <el-input
                  v-model="form.otherCharge"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flexbox">
              <el-form-item label="单位负担药费" label-width="120px">
                <el-input
                  v-model="form.orgaTotal"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="个人承担药费" label-width="120px">
                <el-input
                  v-model="form.personTotal"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注" label-width="120px">
                <el-input
                  v-model="form.remarks"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item label="临时百分比" label-width="120px">
              <el-input
                v-model="form.chargeStandard"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看报销详情弹出框 -->
    <el-dialog
      title="报销详情"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      append-to-body
    >
      <span>
        <div>
          <el-form ref="form" :model="form" :inline="true" disabled>
            <el-form-item label="药品费" label-width="120px">
              <el-input
                v-model="form.chargeForMedicine"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="检查治费" label-width="120px">
              <el-input
                v-model="form.chargeForCheck"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="床位费" label-width="120px">
              <el-input
                v-model="form.chargeForBed"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="其他费用" label-width="120px">
              <el-input
                v-model="form.otherCharge"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="单位负担的药费" label-width="120px">
              <el-input
                v-model="form.orgaTotal"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="个人承担的药费" label-width="120px">
              <el-input
                v-model="form.personTotal"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="120px">
              <el-input v-model="form.remarks" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="临时百分比" label-width="120px">
              <el-input
                v-model="form.chargeStandard"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="chakan">确 定</el-button>
      </span>
    </el-dialog>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        @current-change="dangqianye"
        :page-count="maxpae"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
// import api from "../../../utils/apijs";
import { mapActions } from "vuex";
import api from "../../../utils/apijs";

export default {
  data() {
    return {
      tableData: [],
      formInline: {},
      value1: "",
      value2: "",
      value3: "",
      centerDialogVisible: false, //查看报销详情弹出框状态
      form: {}, //报销详情表单
      editform: {}, //修改报销记录的表单
      addform: {}, //新增报销记录的表单
      editDialogVisible: false, //修改报销记录弹出框状态
      addDialogVisible: false, //新增报销记录弹出框状态
      pagenum: 1,
      pagesize: 5,
      maxpae: null,
    };
  },
  created() {
    this.chaxunbaoxiao();
  },
  methods: {
    ...mapActions([
      "tongyong",
      "chaxunsuoyou",
      "xiugaibaoxiaodan",
      "shanchubaoxiaodan",
    ]),
    //添加数据
    add() {
      this.addDialogVisible = false;
      console.log(this.form);
      this["tongyong"]({
        name: "POST_ADD",
        data: {
          beginDate: this.changetime(this.value1),
          chargeForBed: this.form.Charge_for_bed,
          chargeForCheck: this.form.Charge_for_check,
          chargeForMedicine: this.form.Charge_for_medicine,
          chargeStandard: this.form.Charge_standard,
          endDate: this.changetime(this.value2),
          inDays: this.form.In_days,
          orgaTotal: this.form.Orga_total,
          otherCharge: this.form.Other_charge,
          personNo: this.form.Person_no,
          personTotal: this.form.Person_total,
          remarks: this.form.Remarks,
          sequenceNo: this.form.Sequence_no,
          submitDate: this.changetime(this.value3),
          symptomNo: this.form.Symptom_no,
          levelNo: this.form.Level_no,
        },
      }).then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.chaxunbaoxiao();
          this.$message({
            message: "添加成功",
          });
        } else {
          this.$message({
            message: "添加失败",
          });
        }
      });
    },
    // 获取所有数据
    chaxunbaoxiao() {
      this.chaxunsuoyou({
        name: "GET_CHAXUN",
        data: {
          page: this.pagenum,
          pageSize: this.pagesize,
        },
      }).then((data) => {
        console.log(data);
        this.tableData = data.data.data.list;
        // console.log(this.tableData);
        this.maxpae = Math.ceil(data.data.data.navigatePages / 5);
      });
    },
    // 当前页
    dangqianye(size) {
      console.log(size);
      this.pagenum = size;
      this.chaxunbaoxiao();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //条件查询
    onSubmit() {
      console.log(this.formInline.personNo);
      api
        .GET_IDCHAXUN({
          personNo: this.formInline.personNo,
        })
        .then((data) => {
          console.log(data.data.data);
          this.tableData = data.data.data;
        });
    },
    //查看报销详情
    see(row) {
      console.log(row);
      this.form = { ...row };
      this.centerDialogVisible = true;
    },
    chakan() {
      this.centerDialogVisible = false;
    },
    //修改报销记录
    edit(row) {
      console.log(row);
      this.form = { ...row };
      this.editDialogVisible = true;
    },
    xiugai() {
      // console.log(this.form.inDays);
      this.editDialogVisible = false;
      this.xiugaibaoxiaodan({
        name: "POST_XIUGAIBAOXIAODAN",
        data: this.form,
      }).then((data) => {
        this.chaxunbaoxiao();
      });
    },
    //删除报销记录
    dropinfo(row) {
      console.log(row.id);
      this.shanchubaoxiaodan({
        name: "GET_SHANCHUBAOXIAO",
        data: { id: row.id },
      }).then((data) => {
        if (data.data.code == 200) {
          this.chaxunbaoxiao();
          this.$message({
            message: "删除成功",
          });
        }
      });
    },
    addmedicalmoney() {
      this.addDialogVisible = true;
    },
    //修改时间格式
    padDate(value) {
      return value < 10 ? "0" + value : value;
    },

    changetime(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = this.padDate(date.getMonth() + 1);
      let d = this.padDate(date.getDate());
      let xiaoshi = this.padDate(date.getHours());
      let fenzhong = this.padDate(date.getMinutes());
      let miao = this.padDate(date.getSeconds());
      return `${year}-${month}-${d} ${xiaoshi}:${fenzhong}:${miao}`;
    },
  },
};
</script>
<style lang="less" scoped>
.flexbox {
  display: flex;
}
</style>